<template>
  <div class="claim-report-list-container">
    <!-- 页面标题与操作区 -->
    <div class="page-header">
      <h2>农户报案管理</h2>
      <el-button type="primary" @click="toAddPage">新增报案</el-button>
    </div>

    <!-- 筛选条件区 -->
    <el-card shadow="hover" class="filter-card">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <!-- 保单编号筛选 -->
        <el-form-item label="保单编号">
          <el-input v-model="filterForm.policyId" placeholder="请输入保单编号" clearable style="width: 200px" />
        </el-form-item>

        <!-- 报案状态筛选 -->
        <el-form-item label="报案状态">
          <el-select v-model="filterForm.reportStatus" placeholder="请选择状态" clearable style="width: 200px">
            <el-option label="待调度" value="1" />
            <el-option label="待查勘" value="2" />
            <el-option label="待立案" value="3" />
            <el-option label="已立案" value="4" />
            <el-option label="待理算" value="5" />
            <el-option label="待核赔" value="6" />
            <el-option label="待结案" value="7" />
            <el-option label="已结案" value="8" />
            <el-option label="已驳回" value="9" />
            <el-option label="拒赔申请中" value="10" />
            <el-option label="已重开" value="11" />
          </el-select>
        </el-form-item>

        <!-- 筛选按钮 -->
        <el-form-item>
          <el-button type="primary" @click="getReportList">查询</el-button>
          <el-button @click="resetFilter">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 列表展示区 -->
    <el-card shadow="hover" class="list-card">
      <el-table :data="tableData" border stripe style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }" :loading="loading">
        <!-- 报案ID -->
        <!-- <el-table-column label="报案ID" prop="id" width="80" /> -->

        <!-- 报案编号 -->
        <el-table-column label="报案编号" prop="reportNo" width="200" />

        <!-- 保单编号 -->
        <el-table-column label="保单编号" prop="policyId" width="180" />

        <!-- 投保人ID -->
        <el-table-column label="投保人ID" prop="insuredId" width="100" />

        <!-- 灾祸类型 -->
        <el-table-column label="灾祸类型" width="120">
          <template #default="scope">
            <el-tag :type="getDisasterTagType(scope.row.disasterType)">
              {{ getDisasterTypeName(scope.row.disasterType) }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- 报案状态 -->
        <el-table-column label="报案状态" prop="reportStatus" width="140">
          <template #default="scope">
            <el-tag :type="statusMap[scope.row.reportStatus]?.type" :icon="statusMap[scope.row.reportStatus]?.icon"
              size="small">
              {{ statusMap[scope.row.reportStatus]?.text }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- 报案人信息 -->
        <el-table-column label="报案人" prop="reporterName" width="120" />
        <el-table-column label="联系电话" prop="reporterPhone" width="140" />

        <!-- 报案时间 -->
        <el-table-column label="报案时间" width="200">
          <template #default="scope">
            {{ formatReportTime(scope.row.reportTime) }}
          </template>
        </el-table-column>

      </el-table>

      <!-- 分页控件 -->
      <div class="pagination" style="margin-top: 15px; text-align: right">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
          :page-sizes="[5, 10, 20, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="total" />
      </div>
    </el-card>

    <!-- 状态变更弹窗 -->
    <el-dialog v-model="statusDialogVisible" title="变更报案状态" width="400px">
      <!-- 弹窗内容保持不变 -->
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Clock,
  Search,
  Flag,
  CheckCircle,
  Calculator,
  Audit,
  FolderChecked,
  Check,
  Close
} from '@element-plus/icons-vue'
import axios from "axios";
import hxxp from '@/utils/hxxp.js'

// 报案状态映射表（包含所有9种状态）
const statusMap = {
  1: { text: '待调度', type: 'info', icon: Clock },
  2: { text: '待查勘', type: 'primary', icon: Search },
  3: { text: '待立案', type: 'warning', icon: Flag },
  4: { text: '已立案', type: 'processing', icon: CheckCircle },
  5: { text: '待理算', type: 'info', icon: Calculator },
  6: { text: '待核赔', type: 'primary', icon: Audit },
  7: { text: '待结案', type: 'warning', icon: FolderChecked },
  8: { text: '已结案', type: 'success', icon: Check },
  9: { text: '已驳回', type: 'danger', icon: Close },
  10: { text: '拒赔申请中', type: 'info', icon: Check },
  11: { text: '已重开', type: 'danger', icon: Close }
}

// 灾祸类型映射
const disasterTypeMap = {
  '1': '暴雨',
  '2': '洪水',
  '3': '病虫害',
  '4': '疫病',
  '5': '其他'
}

// 灾祸类型标签样式
const getDisasterTagType = (typeCode) => {
  const tagTypeMap = {
    '1': 'info',    // 暴雨
    '2': 'warning', // 洪水
    '3': 'danger',  // 病虫害
    '4': 'primary', // 疫病
    '5': 'success'  // 其他
  }
  return tagTypeMap[typeCode] || 'default'
}

// 灾祸类型名称
const getDisasterTypeName = (typeCode) => {
  return disasterTypeMap[typeCode] || '未知'
}

// 格式化报案时间
const formatReportTime = (timeStr) => {
  if (!timeStr) return ''
  // 将"2025-09-19T13:41:00"转换为"2025-09-19 13:41:00"
  return timeStr.replace('T', ' ')
}

// 路由与加载状态
const router = useRouter()
const loading = ref(false)

// 筛选表单
const filterForm = reactive({
  policyId: '',
  reportStatus: ''
})

// 分页参数
const pageNum = ref(1)
const pageSize = ref(5)
const total = ref(0)
const tableData = ref([])

// 状态变更弹窗相关
const statusDialogVisible = ref(false)

// 使用hxxp.js实例
const axiosInstance = hxxp;

// 页面挂载时加载列表
onMounted(() => {
  getReportList()
})

// 获取报案列表
const getReportList = async () => {
  loading.value = true;
  try {
    const res = await axiosInstance.get("/aiClaimReport/all", {
      params: {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        policyId: filterForm.policyId || undefined,
        reportStatus: filterForm.reportStatus || undefined
      }
    });

    if (res.code === 100200) {
      tableData.value = res.data.list;
      total.value = res.data.total;
    } else {
      ElMessage.error("获取报案列表失败：" + res.data.msg);
    }
  } catch (err) {
    const errorMsg = err.response
      ? `HTTP ${err.response.status}：${err.response.data?.msg || "服务器异常"}`
      : err.message || "网络连接异常";
    ElMessage.error("获取报案列表异常：" + errorMsg);
  } finally {
    loading.value = false;
  }
};

// 重置筛选条件
const resetFilter = () => {
  filterForm.policyId = ''
  filterForm.reportStatus = ''
  pageNum.value = 1
  getReportList()
}

// 分页大小变更
const handleSizeChange = (val) => {
  pageSize.value = val
  pageNum.value = 1
  getReportList()
}

// 当前页码变更
const handleCurrentChange = (val) => {
  pageNum.value = val
  getReportList()
}

// 跳转到新增报案页面
const toAddPage = () => {
  router.push('/claim/report/form')
}
</script>

<style scoped>
.claim-report-list-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.filter-card {
  margin-bottom: 20px;
}

.filter-form {
  margin-top: 15px;
}

.list-card {
  min-height: 500px;
}

.status-form {
  margin-top: 10px;
}
</style>
